<template>
  <div>
    <!--用户头像和背景  昵称 学习时长 粉丝 关注等-->
    <div class="uiuserbanner">
      <div style="height: 2rem;">
        <span style="color: white;margin-left: 4%;"><a @click="tohome" class="home">首页</a>>个人中心</span>
      </div>
      <div style="height: 18rem;">
        <div style="width:  14rem;height: 14rem;margin-left: 3%;float: left;">
          <img style="width: 14rem;height: 14rem;border-radius: 100%;border:0.45rem solid wheat;margin: 1rem;" :src="loginInfo.avatar" />
        </div>
        <div style="width:  36rem;height: 10rem;float: left;margin-top: 2rem;margin-left: 2rem;">
          <div>
            <h1 style="color: white;font-size: large;font-weight: bolder;">{{loginInfo.nickname}}</h1>
          </div>
          <div>
            <span v-if="loginInfo.sex==2" style="color: white;">男</span><span v-if="loginInfo.sex!=2" style="color: white;">女</span>&nbsp;&nbsp;&nbsp;<span style="color: white;">|</span>&nbsp;&nbsp;&nbsp;<span v-if="loginInfo.age!=null" style="color: white;">{{loginInfo.age}}</span>
            <span v-if="loginInfo.age==null" style="color: white;">0岁</span>
          </div>
          <div>
            <span style="color: white;">不夜城</span>
          </div>
        </div>
        <div style="width:  20rem;height: 10rem;float: left;margin-top: 4rem;margin-left: 35%;">
          <div>
             <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">25H-04M-04S</h4>
          </div>
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">学习时长</h4>
          </div>
        </div>
        <div style="width:  8rem;height: 10rem;float: left;margin-top: 4rem;">
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">5</h4>
          </div>
          <div>
            <h4 style="color: white;font-size: large;font-weight: bolder;text-align: center;">我的关注</h4>
          </div>
        </div>
      </div>

    </div>


    <!-- 内容 -->
    <div class="scontentx">
      <div style="width: 10rem;background-color:  #CDDCDC;display: inline-block;float: left;position: fixed;border-radius: 0.625rem;margin-top: 2rem;">
        <div @click="menuchange('myc')" class="uibnt" style="width: 100%;padding-left: 1rem;">
          <i style="color: goldenrod;" class="el-icon-reading"></i>
          <el-button @click="intomycourse()" style="color: #47494E;" size="medium" type="text">我的课程</el-button>
        </div>
        <div @click="intoecc()" class="uibnt" style="width: 100%;padding-left: 1rem;">
          <i style="color: goldenrod;" class="el-icon-star-on"></i>
          <el-button style="color: #47494E;" size="medium" type="text">我的收藏</el-button>
        </div>
        <div @click="menuchange('myccom')" class="uibnt" style="width: 100%;padding-left: 1rem;">
          <i style="color: goldenrod;" class="el-icon-chat-square"></i>
          <el-button style="color: #47494E;" size="medium" type="text">我的评论</el-button>
        </div>
        <div @click="menuchange('mylicktea')" class="uibnt" style="width: 100%;padding-left: 1rem;">
          <i style="color: goldenrod;" class="el-icon-collection-tag"></i>
          <el-button style="color: #47494E;" size="medium" type="text">关注</el-button>
        </div>

      </div>
      <!-- 我的课程 -->
      <div v-if="menuflag=='myc'" style="width: 119rem;float: left;margin-left: 11rem;">
        <div class="menux">
          <el-tabs v-model="first">
              <el-tab-pane name="全部">
                <span @click="getmycourseui('全部')" slot="label">全部</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deletemycourse(course.id)"  type="danger" size="mini">退出本课程</el-button>
                      </div>


                    </div>

                  </div>
                </div>
                <div>
                </div>

              </el-tab-pane>
              <el-tab-pane name="免费">
                <span @click="getmycourseui('免费')" slot="label">免费课</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deletemycourse(course.id)"  type="danger" size="mini">退出本课程</el-button>
                      </div>


                    </div>

                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="付费">
                 <span @click="getmycourseui('付费')" slot="label">付费课</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deletemycourse(course.id)"  type="danger" size="mini">退出本课程</el-button>
                      </div>


                    </div>

                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
        <div>
           <el-pagination
             class="page"
             background
             layout="total,prev, pager, next"
             prev-text="上一页"
             next-text="下一页"
             :page-size="10"
             :current-page="current"
             @current-change="handleCurrentChange"
             :total="total">
           </el-pagination>
         </div>
      </div>
      <!-- 分页 -->

      <!-- 我的收藏 -->
      <div v-if="menuflag=='mycol'" style="width: 119rem;float: left;margin-left: 11rem;">
        <div class="menux">
          <el-tabs v-model="first">
              <el-tab-pane name="全部">
                <span @click="geteccui('全部')" slot="label">全部</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deleteecc(course.id)"  type="warning" size="mini">取消收藏</el-button>
                      </div>


                    </div>

                  </div>
                </div>
                <div>
                </div>

              </el-tab-pane>
              <el-tab-pane name="免费">
                <span @click="geteccui('免费')" slot="label">免费课</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deleteecc(course.id)"  type="warning" size="mini">取消收藏</el-button>
                      </div>


                    </div>

                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="付费">
                 <span @click="geteccui('付费')" slot="label">付费课</span>
                <div v-for="course in currentcourseinfo" style="width: 100%;height: 14rem;margin-top: 1rem;">
                  <div style="width: 20%;height: 100%;float: left;">
                    <img style="width: 96%;height:96%;margin-top: 2%;margin-left: 2%;" :src="course.cover" />
                  </div>
                  <div style="width: 80%;height: 100%;float: left;background-color: #F2F2F2;">

                    <div style="margin-top: 3rem;margin-left: 0.25rem;">
                      <span v-if="course.free=='免费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">免费课</span>
                      <span v-if="course.free=='付费'" style="background-color: #CCCCCC;color: #7F828B;font-size: 0.6875rem;">付费课</span>
                      &nbsp;&nbsp;<span style="font-weight: bolder;">{{course.title}}</span>
                    </div>
                    <div style="margin-top: 1rem;margin-left: 0.25rem;">
                      <span style="background-color: #CCCCCC;color:  #FF4500;font-size: 0.6875rem;">已学5%</span>&nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">用时5h</span>
                      &nbsp;&nbsp;<span style="color:  #FF4500;font-size: 0.6875rem;">进度至第一章第一节 Java是什么</span>
                    </div>


                    <div style="margin-top: 2rem;margin-left: 0.25rem;">
                      <div style="width: 20rem;float: left;margin-top: 0.78rem;">
                        <span style="color: #7F828B;font-size: 0.6875rem;">笔记11</span>&nbsp;&nbsp;<span style="color: #7F828B;font-size: 0.6875rem;">问答0</span>
                      </div>
                      <div style="width: 10rem;float: left;margin-left: 64.5rem;">
                        <el-button @click="deleteecc(course.id)"  type="warning" size="mini">取消收藏</el-button>
                      </div>


                    </div>

                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
        </div>
        <div>
           <el-pagination
             class="page"
             background
             layout="total,prev, pager, next"
             prev-text="上一页"
             next-text="下一页"
             :page-size="10"
             :current-page="current"
             @current-change="handleCurrentChange"
             :total="total">
           </el-pagination>
         </div>
      </div>
      <!-- 我的评论 -->
      <div v-if="menuflag=='myccom'" style="width: 120rem;background-color: blue;height: 30rem;display: inline-block;float: left;margin-left: 10rem;">
      我的评论
      </div>
      <!--关注 -->
      <div v-if="menuflag=='mylicktea'" style="width: 120rem;background-color: blue;height: 30rem;display: inline-block;float: left;margin-left: 10rem;">
      关注
      </div>

    <div style="clear:both;"></div>
    </div>
    <div class="clear"></div>




    <el-backtop style="color: #B8860B;">
      ^
    </el-backtop>

    <!-- 这是用户中心_id,用户的id是： {{this.$route.params.id}}sss -->
  </div>
</template>

<script>
  import course from '@/api/edu/course/course'
  import uiusercenter from '@/api/edu/uiusercenter/uiusercenter'
  import cookie from 'js-cookie'
  export default{
    data(){
      return{
      menuflag: 'myc',
      loginInfo: null,
      first: '全部',
      courseinfo: [],

     allcourseinfo: [],
     splitedcouseifo: [],
     currentcourseinfo: [],
     total: '',
     querymyc: '',
     queryecc: '',


     current: 1,
      }
    },
    created(){
      this.getuserid()
  },
    methods:{
      //退课
      deletemycourse(courseid){
        this.$confirm('您将要退出此课程, 是否继续呢?', '退课提示', {
                  confirmButtonText: '残忍退课',
                  cancelButtonText: '继续学习',
                  type: 'warning'
                }).then(() => {
                  uiusercenter.outthecourse(this.loginInfo.id,courseid).then(response => {
                    this.getmycourseui(this.querymyc)
                  })
                  this.$message({
                    type: 'success',
                    message: '退课成功!'
                  });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消退课'
                  });
                });

      },
      //取消收藏
      deleteecc(courseid){
        this.$confirm('您将删除此收藏, 是否继续呢?', '提示', {
                  confirmButtonText: '残忍删除',
                  cancelButtonText: '继续收藏',
                  type: 'warning'
                }).then(() => {
                  uiusercenter.outtheecc(this.loginInfo.id,courseid).then(response => {
                    this.geteccui(this.queryecc)
                  })
                  this.$message({
                    type: 'success',
                    message: '删除收藏成功!'
                  });
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });
                });

      },
     group(array, subGroupLength) {
           let index = 0;
           let newArray = [];
           while(index < array.length) {
               newArray.push(array.slice(index, index += subGroupLength));
           }
           return newArray;
       },
     handleCurrentChange(page){
       this.currentcourseinfo=this.splitedcouseifo[page-1]
     },
      //
      intomycourse(){
        this.menuflag='myc'
        this.first='全部'
        this.querymyc=''
        this.getmycourseui('全部')
      },
      intoecc(){
        this.menuflag='mycol'
        this.first='全部'
        this.queryecc=''
        this.geteccui('全部')
      },
      //获取我的课程  全部
      getmycourseui(query){
        this.querymyc=query
        uiusercenter.getmycourse(this.loginInfo.id,query).then(response => {
          this.allcourseinfo=response.data.data.eduCourses
          this.total=this.allcourseinfo.length
          this.splitedcouseifo=this.group(this.allcourseinfo,10);
          console.log('测试分页结果：',this.splitedcouseifo)
          this.currentcourseinfo=this.splitedcouseifo[0]
        })
      },
      // 收藏区域
      //获取我的课程  全部
      geteccui(query){
        this.queryecc=query
        uiusercenter.getecc(this.loginInfo.id,query).then(response => {
          this.allcourseinfo=response.data.data.eduCourses
          this.total=this.allcourseinfo.length
          this.splitedcouseifo=this.group(this.allcourseinfo,10);
          console.log('测试分页结果：',this.splitedcouseifo)
          this.currentcourseinfo=this.splitedcouseifo[0]
        })
      },









      //获取用户id
      getuserid(){
        if(cookie.get("uicenterMember")){
          // console.log('测试登录信息存在情况:',cookie.get("uicenterMember"))
          this.loginInfo=JSON.parse(cookie.get("uicenterMember"))
          // this.uid=this.loginInfo.id
          console.log('测试登录信息存在情况1:',this.loginInfo)
          this.getmycourseui('全部')
          // if(this.loginInfo!=null){
            // this.getstartedlearn(this.loginInfo.id,this.courseid)
            // this.getusercollectinfoxx()
          // }
        }else{
         console.log('还没有登录')
         this.loginInfo=null
         // this.uid=''
        }
      },
      tohome(){
        location.replace('/')
      },
      //菜单改变
      menuchange(flag){
        console.log(flag)
        this.menuflag=flag
      }
    }
  }
</script>

<style>
 .menux .el-tabs__item{
             width: 70px;
             height: 35px;
             padding: 0;
             text-align: center;
             line-height: 35px;
             font-size: 30px;
             color: #FFE8A9;
             /* border-radius: 40px; */
           }
   .menux .el-tabs__header {
   color: #47494E;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
 }
   .menux .el-tabs__nav .el-tabs__item{
     font-size: 15px;
     color: #47494E;
   }
   .menux .el-tabs__active-bar{
             /* display: none; */
             background-color: goldenrod;
             width: 1.875rem;
    }
    .menux .el-tabs__item.is-active{
             color: goldenrod;
             /* background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%); */
             text-align: center;
           }



  .uibnt:hover{
    background-color: #FFE8A9;
  }
  .uiuserbanner{
    background-image: url(../../assets/img/uiuserbanner.png);
    width: 136.6rem;
    height: 14rem;
  }
  .scontentx{
    margin-top: 3.5rem;
    width: 130rem;
    /* height: 145rem; */
    height:auto!important;
    margin-left: auto;
    margin-right: auto;
    /* margin-bottom: 2rem; */
    /* background-color: red; */
  }
  .home{
    color: white;
    text-decoration: none;
  }
  .home:hover{
    color: goldenrod;
    text-decoration: none;
  }


 .page{
   text-align: center;
   margin-top: 1.25rem;
  }
 /*带背景的分页按钮背景色begin*/
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #08C0B9;
   color: #FFF;
 }
 .el-pagination.is-background .el-pager li.active {
   color: #fff;
   cursor: default;
 }
 .el-pagination.is-background .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }
 .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
   background-color: #08C0B9;
   color: #FFF;
 }
 /*带背景的分页按钮背景色end*/


 /*不带背景的分页按钮背景色begin*/
 .el-pager li.active {
   color: #08C0B9;
   cursor: default;
 }
 .el-pagination .el-pager li:hover {
   color: #08C0B9;
 }
 .el-pagination .el-pager li:not(.disabled):hover {
   color: #08C0B9;
 }

</style>
